<template>
	<view>
		<u-top-tips ref="uTips"></u-top-tips>

		<view class="u-page">
			<!-- 首页 -->
			<div v-if="current==0">
				<h1 class="title">我的设备</h1>
				<div class="mylist">设备列表</div>
				<div v-for="(item, index) in deviceList" :key="index">
					<MyCard :title="item.title" :detail="item.detail" @delete="deleteCard(index)"></MyCard>
				</div>
			</div>

			<div v-if=" current==1">
				<MyScan></MyScan>
			</div>

			<div v-if="current==2">
				<MyData></MyData>
			</div>

			<!-- <MyCard></MyCard> -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
	</view>


</template>


<script scoped>
	import MyCard from "../../components/MyCard.vue"
	import MyScan from "../../components/MyScan.vue"
	import MyData from "../../components/MyData.vue"
	export default {
		onReady() {
			this.$refs.uTips.show({
				title: '登录成功！！！',
				type: 'success',
				duration: '2300'
			})
		},
		onLoad() {
			// 去除标题
			uni.setNavigationBarTitle({
				title: "",
			});

			// 隐藏整个导航栏
			uni.setNavigationBarColor({
				frontColor: "#000000", // 标题文字颜色
				backgroundColor: "#ededed", // 背景颜色
				animation: {
					duration: 0, // 可以设置动画持续时间，这里设为0表示无动画
				},
				success() {
					console.log("隐藏导航栏成功");
				},
			});
		},
		components: {
			MyCard,
			MyScan,
			MyData
		},
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "scan",
						selectedIconPath: "scan",
						text: '扫描',
						midButton: true,
						customIcon: false,
					},

					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
				deviceList: [{
						title: "1001",
						detail: "设备详情"
					},
					{
						title: "1002",
						detail: "设备详情"
					},
					
				],

			}
		},
		methods: {
			deleteCard(index) {
				// 删除指定索引的卡片
				this.deviceList.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss">
	.title {
		color: $u-main-color;
		font-weight: bold;
		font-family: Arial, sans-serif;
		font-size: 30px;
		margin-top: 35rpx;
		margin-left: 35rpx;
	}

	.mylist {
		color: $u-content-color;
		font-weight: bold;
		font-family: Arial, sans-serif;
		font-size: 22px;
		margin-top: 50rpx;
		margin-left: 35rpx;
	}
</style>